<template>
    <div>
        <div class="container">
            <!--搜索-->
            <div class="handle-box">
                <h2 style="padding-bottom: 20px;text-align: center">招标信息</h2>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"
                                  @keyup.enter.native="search">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <el-button type="primary" icon="search" @click="search">搜索</el-button>
                        <el-button type="success" size="small" @click="handleAdd">新增</el-button>
                    </el-col>
                    <el-col :span="12">
                        <div style="font-size: 12px;color: #999;">
                            <span style="font-size: 20px">涉及文档数约为</span><span style="padding: 0 10px">≈</span><span
                            style="font-size: 20px">{{Quantity}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--表格-->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column label="标题">
                    <template slot-scope="scope">
                        <a :href="scope.row.url"
                           target="_blank"
                           class="buttonText">{{scope.row.title}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column label="时间" prop="pub_time" width="100"></el-table-column>
            </el-table>
        </div>
        <!--Vue组件-->
        <el-row :gutter="20">
            <el-col :offset="13">
                <div class="page-bar">
                    <ul>
                        <li v-if="cur>1"><a @click="cur--,pageClick()">上一页</a></li>
                        <li v-if="cur==1"><a class="banclick">上一页</a></li>
                        <li v-for="index in indexs" :class="{ 'active': cur == index}">
                            <a @click="btnClick(index)">{{ index }}</a>
                        </li>
                        <li v-if="cur!=all"><a @click="cur++,pageClick()">下一页</a></li>
                        <li v-if="cur == all"><a class="banclick">下一页</a></li>
                        <li><a>共<i>{{all}}</i>页</a></li>
                    </ul>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                /*获取token*/
                access_token: '',
                /*搜索*/
                select_word: '',
                searchUrl: 'http://bigdata-oauth.huimeimt.cn/resource_server/bidmdm/bid_query/招标信息',
                /*数据*/
                tableData: [],
                form: {
                    title: '',
                    pub_time: '',
                },
                /*数量*/
                Quantity: '0',
                /*Vue组件*/
                all: "",
                cur: 1,
            }
        },
        created() {
            this.gainTtoken();
        },
        methods: {
            gainTtoken() {
                this.$axios({
                    method: 'GET',
                    url: 'http://bigdata-oauth.huimeimt.cn/Dataplatform/token',
                }).then((res) => {
                    this.access_token = res.data.access_token;
                    this.get();
                })
            },
            search() {
                this.get()
            },
            handleAdd() {

            },
            /*Vue组件*/
            btnClick(data) {
                if (data != this.cur) {
                    this.cur = data
                    if (this.excludeSpecial(this.select_word) != "") {
                        this.get()
                    } else {
                        this.get()
                    }
                }
            },
            pageClick() {
                if (this.excludeSpecial(this.select_word) != "") {
                    this.get()
                } else {
                    this.get()
                }
            },
            get() {
                if (this.select_word.length == 0) {
                    this.$axios({
                        method: 'GET',
                        url: this.searchUrl + "?page=" + this.cur + "&access_token=" + this.access_token,
                    }).then((res) => {
                        if (res.data.result.length > 0) {
                            this.tableData = res.data.result;
                            TweenLite.to(this.$data, 0.5, {Quantity: res.data.result[0].total});
                            this.all = Math.round(res.data.result[0].total / 20);
                        }

                    })
                } else {
                    this.$axios({
                        method: 'GET',
                        url: this.searchUrl + "?page=" + this.cur + "&kwd=" + this.excludeSpecial(this.select_word) + "&access_token=" + this.access_token,
                    }).then((res) => {
                        if (res.data.result.length > 0) {
                            this.tableData = res.data.result;
                            TweenLite.to(this.$data, 0.5, {Quantity: res.data.result[0].total});
                            this.all = Math.round(res.data.result[0].total / 20);
                        }

                    })
                }
            },
            /*去除非法字符*/
            excludeSpecial(s) {
                s = s.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g, ' ');
                return s;
            }
        },
        computed: {
            indexs() {
                var left = 1;
                var right = this.all;
                var ar = [];
                if (this.all >= 5) {
                    if (this.cur > 3 && this.cur < this.all - 2) {
                        left = this.cur - 2
                        right = this.cur + 2
                    } else {
                        if (this.cur <= 3) {
                            left = 1
                            right = 5
                        } else {
                            right = this.all
                            left = this.all - 4
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left)
                    left++
                }
                return ar
            },
        }
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    /*分页开始*/
    .page-bar {
        margin: 40px;
    }

    ul, li {
        margin: 0px;
        padding: 0px;
    }

    li {
        list-style: none
    }

    .page-bar li:first-child > a {
        margin-left: 0px
    }

    .page-bar a {
        border: 1px solid #ddd;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        cursor: pointer
    }

    .page-bar a:hover {
        background-color: #eee;
    }

    .page-bar a.banclick {
        cursor: not-allowed;
    }

    .page-bar .active a {
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }

    .page-bar i {
        font-style: normal;
        color: #d44950;
        margin: 0 4px;
        font-size: 12px;
    }

    /*分页结束*/
</style>
